<template>
  <van-nav-bar title="iGame" @click-left="onClickLeft" fixed>
    <template #left>
      <van-icon name="arrow-left" size="24" color="#000" />
    </template>
  </van-nav-bar>

  <div class="login-register-container">
    <div class="logo">
      <van-image width="50" height="50" src="../../../public/Logo.png" />
      <h2>Gamer聚集地</h2>
    </div>
    <van-tabs v-model:active="active" animated type="card" color="#EE0A24">
      <van-tab title="登录" style="margin-top: 20px;">
        <van-form @submit="onSubmit">
          <van-cell-group inset>
            <van-cell style="margin-top: 30px;">
              <h2>欢迎来到iGame</h2>
            </van-cell>
            <van-field v-model="username" name="用户名" label="用户名" placeholder="用户名"
              :rules="[{ required: true, message: '请填写用户名' }]" />
            <van-field v-model="password" type="password" name="密码" label="密码" placeholder="密码"
              :rules="[{ required: true, message: '请填写密码' }]" />
            <van-cell @click="username = 'Tester', password = 123456">忘记密码?</van-cell>
          </van-cell-group>
          <div style="margin: 50px;margin-top: 70px;">
            <van-button round block color="linear-gradient(to right, #ff6034, #ee0a24)" native-type="submit">登录
            </van-button>
          </div>
        </van-form>
      </van-tab>
      <van-tab title="注册" style="margin-top: 20px;">
        <van-form @submit="onRegister">
          <van-cell-group inset>
            <van-cell style="margin-top: 30px;">
              <h2>成为iGame社区的一员</h2>
            </van-cell>
            <van-field v-model="username" name="用户名" label="用户名" placeholder="用户名"
              :rules="[{ required: true, message: '请填写用户名' }]" />
            <van-field v-model="password" type="password" name="密码" label="密码" placeholder="密码"
              :rules="[{ required: true, message: '请填写密码' }]" />
            <van-cell @click="active = 0">已有账号?</van-cell>
          </van-cell-group>
          <div style="margin: 50px;margin-top: 70px;">
            <van-button round block color="linear-gradient(to left, #ff6034, #ee0a24)" native-type="submit">注册
            </van-button>
          </div>
        </van-form>
      </van-tab>
    </van-tabs>
  </div>

  <div class="holder"></div>
</template>

<script setup>
import { Toast } from 'vant';

import { ref } from 'vue';

import { userLogin, userRegister } from '../../network/user'

import { useUserStore } from '../../store/user';

const userStore = useUserStore()

const active = ref(0);
const username = ref('');
const password = ref('');

// 登录
const onSubmit = () => {
  userLogin(username.value, password.value).then(res => {
    // 保存token
    window.sessionStorage.setItem("token", res.data.token);
    // 保存用户信息
    userStore.$patch(state => {
      for (let key in res.data.userInfo) {
        state.userInfo[key] = res.data.userInfo[key]
      }
      // state.userInfo.id = res.data.userInfo.id
      // state.userInfo.avatarUrl = res.data.userInfo.avatarUrl
      // state.userInfo.name = res.data.userInfo.name
      // state.userInfo.level = res.data.userInfo.level
      // state.userInfo.accountBalance = res.data.userInfo.accountBalance
    })

    Toast.success(res.data.message);
    setTimeout(() => {
      history.back()
    }, 500)
  }).catch(err => {
    console.log(err);
    Toast.fail(err.response.data.message);
  })
};

// 注册
const onRegister = () => {
  userRegister(username.value, password.value).then(res => {
    Toast.success(res.data);
    active.value = 0
  }).catch(err => {
    Toast.fail(err.response.data);
    active.value = 0
  })
}

// 点击左侧按钮返回上级路由
const onClickLeft = () => {
  history.back()
};
</script>

<style scoped>
.login-register-container {
  padding: 100px 12px 0px 12px;
  width: calc(100vw - 24px);
  height: calc(100vh - 100px);
  background-color: #fff;
}

.login-register-container .logo {
  padding-bottom: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.holder {
  height: 50px;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999 !important;
  background-color: #fff;
}
</style>
